<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <title>签到效果实现</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="css/sign1.css" /> 
  <script type="text/javascript" src="js/calendar.js"></script> 

<style type="text/css">
	
	.sign_equal {
	  display:table;
	  border-collapse:separate;
	  width: 100%;
	}
	.sign_row {
	  display:table-row;
	}
	.sign_row div {
	  display:table-cell;
	  width:14.3%;
	  border-top: 1px solid #e3e3e3;
	  /*border-bottom: 1px solid #e3e3e3;*/
	  border-left: 1px solid #e3e3e3;
	  height: 40px;
      text-align: center;
      line-height: 40px;
	}
	.sign_row .bold{
		font-weight: bold;
	}
	.sign_row div:last-child { 
		border-right: 1px solid #e3e3e3;
	}
	.sign_equal .sign_row:last-child div{
		border-bottom: 1px solid #e3e3e3;
	}
	.sign_equal .on {
	    background: url(./images/sign_have.gif) no-repeat center;
	}
</style>
 </head> 
 <body> 
  <div id="calendar">
   <div class="sign_main" id="sign_layer">
    <div class="sign_succ_calendar_title">
     <div class="calendar_month_span">
      2017年5月
     </div>
    </div>
    <div class="sign_equal">
	    <div class="sign_row">
	      <div class="th_7 bold">日</div>
	      <div class="th_1 bold">一</div>
	      <div class="th_2 bold">二</div>
	      <div class="th_3 bold">三</div>
	      <div class="th_4 bold">四</div>
	      <div class="th_5 bold">五</div>
	      <div class="th_6 bold">六</div>
	   </div>
	   <div class="sign_row">
	      <div class="td_7 "> </div>
	      <div class="td_1 ">1</div>
	      <div class="td_2 ">2</div>
	      <div class="td_3 ">3</div>
	      <div class="td_4 ">4</div>
	      <div class="td_5 ">5</div>
	      <div class="td_6 ">6</div>
	   </div>
	   <div class="sign_row">
	      <div class="td_7 ">7</div>
	      <div class="td_1 ">8</div>
	      <div class="td_2 on">9</div>
	      <div class="td_3 ">10</div>
	      <div class="td_4 on">11</div>
	      <div class="td_5 on">12</div>
	      <div class="td_6 on">13</div>
	   </div>
	   <div class="sign_row">
	      <div class="td_7 ">14</div>
	      <div class="td_1 ">15</div>
	      <div class="td_2 ">16</div>
	      <div class="td_3 ">17</div>
	      <div class="td_4 ">18</div>
	      <div class="td_5 ">19</div>
	      <div class="td_6 ">20</div>
	   </div>
	   <div class="sign_row">
	      <div class="td_7 ">21</div>
	      <div class="td_1 ">22</div>
	      <div class="td_2 ">23</div>
	      <div class="td_3 ">24</div>
	      <div class="td_4 ">25</div>
	      <div class="td_5 ">26</div>
	      <div class="td_6 ">27</div>
	   </div>
	   <div class="sign_row">
	      <div class="td_7 ">28</div>
	      <div class="td_1 ">29</div>
	      <div class="td_2 ">30</div>
	      <div class="td_3 ">31</div>
	      <div class="td_4 "> </div>
	      <div class="td_5 "> </div>
	      <div class="td_6 "> </div>
	   </div>
	</div>
	<br>
    <div class="sign" id="sign_cal">
     <table>
      <tbody>
       <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
       </tr>
       <tr>
        <td class="calendar_record"> </td>
        <td class="calendar_record">1</td>
        <td class="calendar_record">2</td>
        <td class="calendar_record">3</td>
        <td class="calendar_record">4</td>
        <td class="calendar_record">5</td>
        <td class="calendar_record">6</td>
       </tr>
       <tr>
        <td class="calendar_record">7</td>
        <td class="calendar_record">8</td>
        <td class="on">9</td>
        <td class="calendar_record">10</td>
        <td class="on">11</td>
        <td class="on">12</td>
        <td class="on">13</td>
       </tr>
       <tr>
        <td class="calendar_record">14</td>
        <td class="calendar_record">15</td>
        <td class="calendar_record">16</td>
        <td class="calendar_record">17</td>
        <td class="calendar_record">18</td>
        <td class="calendar_record">19</td>
        <td class="calendar_record">20</td>
       </tr>
       <tr>
        <td class="calendar_record">21</td>
        <td class="calendar_record">22</td>
        <td class="calendar_record">23</td>
        <td class="calendar_record">24</td>
        <td class="calendar_record">25</td>
        <td class="calendar_record">26</td>
        <td class="calendar_record">27</td>
       </tr>
       <tr>
        <td class="calendar_record">28</td>
        <td class="calendar_record">29</td>
        <td class="calendar_record">30</td>
        <td class="calendar_record">31</td>
        <td class="calendar_record"> </td>
        <td class="calendar_record"> </td>
        <td class="calendar_record"> </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
  </div> 
 </body>
</html>